import React from 'react';
// 引入导航条组件
import Mynavbar from '@/components/Mynavbar';
// 引入接口
import { doCheckPhoneApi } from '@/api/regist'

// 引入antd
import { Modal } from 'antd-mobile'
import {
    Form,
    Input,
    Button,
} from 'antd-mobile';

import { useHistory } from 'react-router-dom'

const Step1 = () => {
    const his = useHistory()
    const onFinish = (value) => {
        //console.log(value)
        // 调用接口
        doCheckPhoneApi(value).then(res => {
            console.log(res);
            if (res.data.code == '10005') {
                // 已被注册
                Modal.confirm({
                    content: '账号已注册,是否去登录?',
                    onCancel() {
                        console.log('取消');
                    },
                    onConfirm() {
                        console.log('确定');
                        // 跳转到登录页
                        his.push('/login')
                    }
                })
            }
            if (res.data.code == 200) {
                //注册成功
                Modal.confirm({
                    content: `将向手机号${value.tel}发送验证码!`,
                    onCancel() {
                        //console.log('取消');
                    },
                    onConfirm() {

                        // 跳转到注册步骤2
                        his.push({
                            pathname: '/regist/step2',
                            state: {
                                tel: value.tel
                            }
                        })
                    }
                })
            }
        })
    }

    const checkMobile = (_, value) => {
        //console.log('value', value);
        if (/^1[3-9]\d{9}$/.test(value)) {
            return Promise.resolve()
        }
        return Promise.reject(new Error('手机号输入有误!'))
    }
    return (
        <div>
            <Mynavbar isshowright={false}>京东注册</Mynavbar>
            {/* 表单 */}
            <Form
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        下一步
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }, { validator: checkMobile }]}
                >
                    <Input onChange={console.log} placeholder='请输入用户名' />
                </Form.Item>
            </Form>

        </div>
    );
}

export default Step1;
